<template>
  <div class="block" @mouseenter="handleEnter" @mouseleave="handleLeave">
    <el-carousel class="banner" :autoplay="autoplay" pause-on-hover arrow="always" :interval="5000" :loop="true">
      <el-carousel-item >
        <VideoPlayer :videoSrc="videoSrc"/>
      </el-carousel-item>
      <el-carousel-item v-for="(item, index) in bannerImgList" :key="index">
        <img :src="returnImage(item.indexImg)" :alt="item.indexTitle">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import { defineComponent, onMounted,ref } from "vue";
import VideoPlayer from "@/components/vedioPlayer/index.vue"
import { getVideo } from "@/api/PC-Home";
export default defineComponent({
  components: { VideoPlayer },
  props:{
    bannerImgList:{
      type: Array,
      default:()=>[]
    }
  },
  setup() {
    const autoplay = ref(true)
    const videoSrc = ref("")
    const returnImage = url => {
      return process.env.VUE_APP_URL + "/" + url;
    };
    const handleEnter =()=>{
      autoplay.value = false
    };
    const handleLeave =()=>{
      autoplay.value = true
    };
    // 获取视频接口
    onMounted(() => {
      getVideo().then(res => {
        let data = res.data;
        videoSrc.value = process.env.VUE_APP_URL + "/" + data.indexImg
      })
      // console.log(this.bannerImgList);
    });
    return {
      autoplay,
      returnImage,
      handleEnter,
      handleLeave,
      videoSrc
    };
  }
});
</script>
<style scoped lang="scss">
.banner{
  width: 100%;
  height: 784px;
}
::v-deep .el-carousel__container{
  height: 100%;
  &:hover{
    .el-carousel__arrow--left{
      display: block
    }
    .el-carousel__arrow--right{
      display: block
    }
  }
}
::v-deep .el-carousel__item {
  img {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-carousel__arrow--left {
  width: 70px;
  height: 70px;
  display: none;
  background: none;
  .el-icon {
    width: 50px;
    height: 50px;
    background: url(../../assets/img/right.png);
    background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: cover;

    svg {
      display: none;
    }
  }
}
::v-deep .el-carousel__arrow--right {
  width: 70px;
  height: 70px;
  display: none;
  background: none;
  .el-icon {
    width: 50px;
    height: 50px;
    background: url(../../assets/img/left.png);
    background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: cover;

    svg {
      display: none;
    }
  }
}

::v-deep .el-carousel__indicator {
  .el-carousel__button {
    width: 16px;
    height: 8px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 11px;
  }

  &.is-active {
    .el-carousel__button {
      width: 32px;
    }
  }
}
@media only screen and (max-device-width: 1440px) {
  .banner{
    height: 640px;
  }
}
@media only screen and (max-device-width: 768px) {
  .banner{
    height: 150px;
  }
}
</style>